<template>
  <!-- 为 vchart 准备一个具备大小（宽高）的 DOM，当然你也可以在 spec 配置中指定 -->
  <div :id="chartId" style="width: 100%;height:100%;"></div>
</template>

<script setup>
import {useId} from 'vue'
import VChart from '@visactor/vchart'
import { StreamLight } from '@visactor/vrender-core'

defineOptions({ name: 'compareBar' })
const spec = {
  type: 'area',
  background:'transparent',
  data: {
    values: [
      {
        time: '2:00',
        value: 8
      },
      {
        time: '4:00',
        value: 9
      },
      {
        time: '6:00',
        value: 11
      },
      {
        time: '8:00',
        value: 14
      },
      {
        time: '10:00',
        value: 16
      },
      {
        time: '12:00',
        value: 17
      },
      {
        time: '14:00',
        value: 17
      },
      {
        time: '16:00',
        value: 16
      },
      {
        time: '18:00',
        value: 15
      }
    ]
  },
  xField: 'time',
  yField: 'value',
  animationNormal: {
    area: {
      loop: 100,
      duration: 1500,
      easing: 'quadIn',
      custom: StreamLight,
      customParameters: {
        streamLength: 30,
        attribute: { stroke: 'white', strokeOpacity: 0.8, lineWidth: 2 }
      }
    }
  }
};
const chartId=useId()
onMounted( () => {
// 创建 vchart 实例
  const vchart = new VChart(spec, { dom: chartId })
// 绘制
  vchart.renderSync()
})
</script>

<style scoped>

</style>
